<template>
  <div class="login-container">
    <!-- 标题栏 -->
    <van-nav-bar  left-text="返回" left-arrow @click-left="returnMyPage" class="page-nav-bar" title="林子头条" />
    <!-- 表单 -->
    <van-form ref="loginForm" @submit="onSubmit">
        <!-- 验证码输入框 -->
        <van-field
            v-model="user.mobile"
            name="mobile"
            placeholder="输入手机号"
            :rules="[{ required: true, message: '请填手机号',max: 11,min: 11,pattern: /^1[3456789]\d{9}$/}]"
            type="number"
        >
            <template #left-icon>
                <i class="iconfont toutiao-shouji"></i>
            </template>
        </van-field>
        <!-- 手机号输入框 -->
        <van-field
            v-model="user.code"
            name="code"
            placeholder="输入验证码"
            :rules="[{ required: true, message: '请填写验证码',max: 6,min: 6,pattern: /^\d{6}$/}]"
            type="number"
        >
            <template #left-icon>
                <i class="iconfont toutiao-yanzhengma"></i>
            </template>
            <template #button>
                <!-- 获取验证码 -->
                <van-button @click.prevent="sendCode" :disabled="isSendCode" :class="!isSendCode?'send-code-befar':'send-code-after'" size="small" round type="primary">{{ sendCodeText }}</van-button>
            </template>
        </van-field>
        <!-- 登陆按钮 -->
        <div class="login-button">
            <van-button block type="info" native-type="submit">登录&注册</van-button>
        </div>
    </van-form>
  </div>
</template>

<script>
import {login,sendCode} from '@/api/user'
import {Toast} from 'vant'
export default {
data () {
    return {
      user:{
        mobile: '13060251543',
        code: '246810',
      },
      isSendCode:false,
      sendCodeText:'获取验证码',
    }
  },
methods: {
    async onSubmit() {
        Toast.loading({
            message: '登陆中...',
            forbidClick: true,
            duration:0,
        })
      try{
        await login(this.user).then(res => {
            Toast.success('登陆成功')
            this.$store.commit('setUser',res.data.data)
            this.$router.back()
        })
      }catch(err) {
        if(err.response)
        if(err.response.status === 400){
            // console.error('手机号或验证码错误!')
            Toast.fail('手机号或验证码错误')
            return
        }
            // console.error('登陆失败!请稍后再试')
            Toast.fail('登陆失败')

      }
    },
    async sendCode(){
        try {
            await this.$refs.loginForm.validate('mobile')
        } catch (error) {
            return error
        }
        if(this.isSendCode) {
            Toast.fail('请勿重复发送')
            return
        }
        Toast.loading({
            message: '发送中...',
            forbidClick: true,
            duration:0,
        })
        try{
            await sendCode(this.user.mobile).then(res => {
            console.log(res.data.data)
            Toast.success('发送成功')
        })
        }catch(err){
            if (err.response.status === 404) {
                Toast.fail('接口已失效')
            }else if (err.response.status === 429){
                Toast('发送过于频繁')
            }else{
                Toast.fail('发送失败')
            }
        }
    this.isSendCode = true
    let time = 59
    this.sendCodeText = time + '秒后重发'
        time--
    let timer = setInterval(() => {
        this.sendCodeText = time + '秒后重发'
        time--
        if (time==-1) {
            this.isSendCode = false
            clearInterval(timer)
            this.sendCodeText = '重新发送'
        }
    }, 1000)
  },
  returnMyPage(){
    this.$router.back()
  },
  }
}
</script>

<style lang="less" scoped>
.login-container{
    .toutiao-shouji{
        font-size: 38px;
        color: #7f7f7f;
    }
    .toutiao-yanzhengma{
        font-size: 38px;
        color: #7f7f7f;
    }
    .send-code-after{
        background-color: #f1f1f1;
        color: #999999;
        box-sizing: border-box;
        height: 46px;
        width: 152px;
        font-size: 22px;
        border:0px solid #dddddd;
        text-align: center;
    }
    .send-code-befar{
        background-color: #22cc9ff7;
        color: white;
        box-sizing: border-box;
        height: 46px;
        width: 152px;
        font-size: 22px;
        border:0px solid #dddddd;
        text-align: center;
    }
    .login-button {
        .van-button{
            background-color: #22cc9ff7;
            border: 0px solid #22cc9f;
            height: 78px;
        }
        margin: 53px 33px;
    }
}
</style>